import 'package:flutter/material.dart';
import 'package:flutter_douban/config/Http_service.dart';
import 'package:flutter_douban/config/app_colors.dart';
import 'package:flutter_douban/main_page/store/view/stroe_product_cell.dart';
import 'package:flutter_douban/model/store_category_model.dart';
import 'package:flutter_douban/tool_views/back_nav_btn.dart';
import 'package:flutter_douban/tool_views/nav_title_page.dart';

class StoreCategoryPage extends StatefulWidget {
  final String title;
  const StoreCategoryPage({Key? key, required this.title}) : super(key: key);

  @override
  _StoreCategoryPageState createState() => _StoreCategoryPageState();
}

class _StoreCategoryPageState extends State<StoreCategoryPage> {
  List<StoreCategoryModel> _storeList = StoreCategoryModelList([]).list;

  int _stage = 1;

  List _stageList = [
    {'name': '全部', 'id': '1'},
    {'name': '进口水果', 'id': '2'},
    {'name': '水果', 'id': '3'},
    {'name': '蔬菜', 'id': '4'},
  ];

  Future _getListData() async {
    try {
      /// 全部数据
      Map<String, dynamic> result = await HttpService.getMockDataWithPath(
          path: 'mock/store_category_data0${_stage}.json');
      StoreCategoryModelList storeModelList =
          StoreCategoryModelList.fromJson(result["result"]["ps"]);
      setState(() {
        _storeList = storeModelList.list;
      });

      /// 结束加载状态
    } catch (e) {
      print(e);
    } finally {}
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    /// 列表数据
    _getListData();
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> rowWidget = [];
    _stageList.forEach((element) {
      rowWidget.add(
          InkWell(
              onTap: () {
                setState(() {
                  _stage = int.parse(element['id']);
                  _getListData();
                });
              },
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 0, horizontal: 12),
                margin: EdgeInsets.symmetric(vertical: 17, horizontal: 12),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: _stage.toString() == element['id'] ? AppColors.yellow : AppColors.page,
                  borderRadius: BorderRadius.all(Radius.circular(6)),
                  border: Border.all(width: 1, color: Colors.transparent),
                ),
                child: Text(
                  element['name'],
                  style: TextStyle(
                      fontWeight:_stage.toString() == element['id'] ?  FontWeight.bold : FontWeight.w400,
                      fontSize: 13,
                      color: _stage.toString() == element['id'] ? AppColors.black : AppColors.qianTextColor),
                ),
              ))
      );
    });

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: BackNavBtn(),
        title: NavTitlePage(
          titleStr: widget.title,
        ),
      ),
      body: Stack(
        children: [
          Container(
            color: AppColors.page,
            padding: EdgeInsets.only(left: 14, right: 14, top: 65),
            child: GridView.builder(
                itemCount: _storeList.length,
                primary: false,
                shrinkWrap: true,
                physics: AlwaysScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    //横轴元素个数
                    crossAxisCount: 2,
                    //纵轴间距NeverScrollableScrollPhysics
                    mainAxisSpacing: 1.0,
                    //横轴间距
                    crossAxisSpacing: 15.0,
                    //子组件宽高长度比例
                    childAspectRatio: 0.58),
                itemBuilder: (BuildContext context, int index) {
                  return StroeProductCell(
                    model: _storeList[index],
                  );
                }),
          ),
          Positioned(
            child: Container(
              height: 60,
              color: Colors.white,
              width: MediaQuery.of(context).size.width,
              child: Row(
                children: rowWidget,
              ),
            ),
          )
        ],
      ),
    );
  }
}
